<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素遍历操作</title>
		<!-- 元素遍历操作：针对 DOM树中父元素进行遍历【父子级关系】
		 children()		功能：获取匹配元素集合中每个元素的直接子元素
		 parent()		功能：获取匹配元素集合中每个元素的直接父元素
		 
		 sibings()		功能：获取匹配元素集合中每个元素的所有兄弟元素
		 
		 next()			功能：获取匹配元素集合中每个元素的下一个兄弟元素
		 prev()			功能：获取匹配元素集合中每个元素的上一个兄弟元素
		 
		 each()			功能：遍历匹配元素集合，对每个元素执行指定的函数
		 -->
		<style>
			.container{
				border: 1px solid black;
				margin: 10px;
				padding: 10px;
			}
			.box{
				background-color: #ffa5a7;
				margin: 10px;
				padding: 10px;
			}
			button{
				margin: 5px;
				
			}
			
		</style>
		<script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- 外层div.container 内层4个div.box  id=box1
			css .container  1px边框  内外边距10px
				.box  背景颜色  内外边距10px
				button   外边距5px
		 -->
		<div class="container">
			<div class="box" id="box1">盒子1</div>
			<div class="box" id="box2">盒子2</div>
			<div class="box" id="box3">盒子3</div>
			<div class="box" id="box4">盒子4</div>
		</div>
		<button id="getcrBtn">获取直接子元素</button>
		<button id="getpBtn">获取父元素</button>
		<button id="getsBtn">获取兄弟元素</button>
		<button id="getbBtn">获取下一个兄弟元素</button>
		<button id="getpbBtn">获取上一个兄弟元素</button>
		<button id="eachBtn">遍历元素</button>
		<script>
	/* 1.点击 直接获取子元素 按钮 container父元素 给.box元素加 10px */
			$("#getcrBtn").click(function(){
				$(".container").children().css("border","10px solid #d9d5f1");
			});
		/* 2.点击 获取父元素 按钮 container父元素 加背景色#ff0 */
			$("#getpBtn").click(function(){
				$(".box").parent().css("background-color","#f1ccf0");
			});
		/* 3.点击 获取兄弟元素 按钮  box3的兄弟元素  加背景颜色 */
			$("#getsBtn").click(function(){
				$("#box3").siblings().css("background-color","#bce8f1");
			});
		/* 4.点击 获取下一个兄弟元素 按钮  box2的下一个元素  加背景颜色 */
			$("#getbBtn").click(function(){
				$("#box2").next().css("background-color","#d8f1c8");
			});
		/* 5.点击 获取上一个兄弟元素 按钮  box4的上一个元素  圆 阴影 字体放大 */
			$("#getpbBtn").click(function(){
				$("#box4").prev().css({"width":"100px",
									   "height":"100px",
									   "border-radius":"50%",
									   "box-shadow":"5px 5px #ffbdbe",
									   "font-size":"2em",
									   "line-height":"100px",
									   "text-align":"center"
				});
			});
		/* 6.点击 遍历元素  按钮  实现  动态输出这是box1...
			each(funciton(index，element){
				识别`` 传入 下标${index}
				注意：千万别加单双引号 别家拼接符
			})
		*/
			$("#eachBtn").click(function(){
				$(".box").each(function(i,e){//i 下标  e 元素形参
					$(e).text(`这是第${i+1}盒子`);
				});
			});
		</script>
	</body>
</html>